<template>
	<view>
		<an-nav-bar title="微信号">
			<template v-if="show == 1" :slot="'right'">
				<view style="color: #fff;" @click="save">保存</view>
			</template>
		</an-nav-bar>
		<view class="line">
			<input type="text" v-model="wecatAccount" :placeholder="wecatAccount ? wecatAccount:'请输入微信号'">
		</view>
		<button @click="save" v-if="show == 0">保存</button>
		<view class="tips" v-if="show == 1">
			<view class="">温馨提示</view>
			<view class="">1.微信号每次被查看，你都能获取你设置单价的50%收益。</view>
			<view class="">2.填写虚假微信号的将面临直接封停账号的处理。</view>
			<view class="">3.用户投诉微信号加不上的将无法获得收益，投诉超过3次加不上的，直接封停账号。</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wecatAccount: "",
				show: 0
			};
		},
		onLoad(option) {
			if (option.show) {
				this.show = option.show
			}
		},
		onShow() {
			this.wecatAccount = this.$mStore.state.userInfo.wecatAccount
		},
		methods: {
			save() {
				if (!this.wecatAccount) {
					this.$mHelper.toast('请输入微信号');
					return
				}
				if (!this.wecatAccount.replace(/[^\w]/g, '')) {
					this.$mHelper.toast('微信号格式不正确');
					return
				}
				this.$http.put('/app/customer/customer', {
					wecatAccount: this.wecatAccount
				}).then(res => {
					this.$mStore.commit('getUserInfo');
					this.$mHelper.toast('微信号修改成功');
					if (this.show == 1) {
						setTimeout(() => {
							this.$mHelper.back()
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.tips {
		padding: 60rpx 30rpx;

		&:first-child {
			font-weight: 700;
		}

		view {
			color: #fd892f;
			font-size: 26rpx;
			margin-bottom: 10rpx;
		}
	}

	.line {
		height: 100rpx;
		background: #fff;
		padding: 0 30rpx;
		margin: 30rpx 0;

		input {
			width: 100%;
			height: 100rpx;
			font-size: 30rpx;
			line-height: 100rpx;
		}
	}

	button {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient(90deg, #d7b075, #aa8050);
		border-radius: 50rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		margin: 60rpx auto;
	}
</style>
